<template>
  <div>
    <el-card shadow="never">
      <el-table :data="state.dataSoucre" :loading="state.loading" border scrollbar-always-on>
        <el-table-column fixed="left" prop="name" label="名称" align="center" width="200" />
        <el-table-column prop="principle" label="技术原理及系统组成" align="center" width="300" />
        <el-table-column prop="target" label="适用目标污染物" align="center" width="230" />
        <el-table-column prop="advantage" label="优点" align="center" width="200" />
        <el-table-column prop="boundedness" label="地块适用/局限性" align="center" width="260" />
        <el-table-column prop="maturity" label="技术成熟度" align="center" width="200" />
        <el-table-column prop="efficiency" label="效率" align="center" width="160" />
        <el-table-column prop="cost" label="费用" align="center" width="260" />
        <el-table-column prop="timeliness" label="时间" align="center" width="200" />
        <el-table-column prop="enviRisks" label="环境风险" align="center" width="100" />
        <el-table-column fixed="right" align="center" label="操作" width="140px">
          <template #default="scope">
            <el-button
              v-hasPermi="['system:dict:update']"
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              v-hasPermi="['system:dict:delete']"
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!--      <Pagination-->
      <!--        v-model:limit="state.params.pageSize"-->
      <!--        v-model:page="state.params.pageNo"-->
      <!--        :total="state.total"-->
      <!--        @pagination="getList"-->
      <!--      />-->
    </el-card>
    <!-- 表单弹窗：添加/修改 -->
    <AddForm ref="formRef" @success="getList" />
  </div>
</template>

<script lang="ts" setup>
import { getListApi, deleteApi } from '@/api/contaminants'
import { List } from '@/api/contaminants/types'
import AddForm from './components/AddForm.vue'

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

defineOptions({ name: 'Scheme' })

type StateType = {
  dataSoucre: List[]
  loading: boolean
  total: number
  params: PageParam
}

const state = reactive<StateType>({
  dataSoucre: [],
  loading: false,
  total: 0,
  params: {
    pageNo: 1,
    pageSize: 100
  }
})

const getList = async () => {
  const { list, total } = await getListApi({
    ...state.params
  })
  state.dataSoucre = list
  state.total = total
}
getList()

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await deleteApi(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
</script>
